import {
  IColumnConfig,
  IFormConfig,
  IFormData,
  IFormItemConfig,
  IJLDatagridInstance,
  IJlFormInstance,
  IPageConfig,
  ITableConfig,
} from '@jl/element-plus';
import { useRequest } from '@jl/common/composable';
import { getProjects } from '@/api/project';
import { PaginationLayout } from '@/views/enum/common';

const { run, data } = useRequest<any, any>(getProjects, {
  list: [],
  count: 0,
});

const tableData = computed(() => {
  if (data.value.rows && data.value.rows.length > 0) {
    return data.value.rows.map((item: any) => ({
      ...item,
      organizeName: item.companyName ?? item.orgName,
      province: item.provinceName,
      city: item.cityName,
      district: item.areaName,
      uploadTime: item.createTime,
      state: item.status,
    }));
  } else {
    return [];
  }
});

export function list() {
  const formRef = ref<IJlFormInstance>();

  const formConfig: IFormConfig = { gutter: 10, labelWidth: 80 };
  const formData = ref<IFormData>({
    blurStr: '',
    state: undefined,
  });

  const formItemConfig = computed<IFormItemConfig>(() => [
    {
      type: 'input',
      key: 'blurStr',
      label: '项目名称',
      span: 5,
      clearable: true,
      placeholder: '项目编号/项目名称',
      optionsWithAll: true,
    },
    {
      type: 'select',
      key: 'state',
      label: '状态',
      span: 5,
      clearable: true,
      placeholder: '请选择',
      options: [
        { label: '全部', value: undefined },
        { label: '启用', value: 1 },
        { label: '停用', value: 0 },
      ],
      optionsWithAll: false,
    },
    {
      type: 'slot',
      slotName: 'searchSlot',
      key: 'search',
      label: '',
      span: 5,
      labelWidth: 10,
    },
  ]);

  const tableRef = ref<IJLDatagridInstance>();

  const tableConfig = ref<ITableConfig>({
    index: false,
    selection: false,
  });

  const pageConfig = ref<IPageConfig>({
    small: false,
    visible: true,
    layout: PaginationLayout,
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true,
  });

  const tableColumn = ref<IColumnConfig[]>([
    { label: '项目编码', prop: 'projectCode' },
    { label: '项目名称', prop: 'projectName' },
    { label: '所属企业名称', prop: 'organizeName' },
    { label: '省份', prop: 'province' },
    { label: '市级', prop: 'city' },
    { label: '区县', prop: 'district' },
    { label: '创建时间', prop: 'uploadTime' },
    { label: '操作', prop: 'operation', width: '160px', fixed: 'right', slotName: 'slotOperation' },
  ]);

  const search = async (flag = false) => {
    if (flag) {
      pageConfig.value.currentPage = 1;
    }
    // const searchParam = {
    //   params: {
    //     index: pageConfig.value.currentPage,
    //     pageSize: pageConfig.value.pageSize,
    //     blurStr: formData.value.blurStr,
    //     state: formData.value.state ? Number(formData.value.state) : -1,
    //   },
    // };
    const searchParam = {
      current: pageConfig.value.currentPage,
      pageSize: pageConfig.value.pageSize,
      projectName: formData.value.blurStr,
      status: formData.value.state,
    };
    await run(searchParam);
    pageConfig.value.total = data.value.total;
  };
  function pageSizeChange(size: number) {
    pageConfig.value.pageSize = size;
    search();
  }
  function pageCurrentChange(page: number) {
    pageConfig.value.currentPage = page;
    search();
  }
  return {
    formRef,
    formConfig,
    formData,
    formItemConfig,
    tableRef,
    pageConfig,
    tableConfig,
    tableColumn,
    tableData,
    search,
    pageCurrentChange,
    pageSizeChange,
  };
}
